<template>
  <div class='container'>
    <!-- 新增弹窗 -->
    <el-dialog :title="title"
    :visible="dialogFormVisible"
    :closeOnClickModal="false"
    @close="closedialog"
    width="30%">

      <!-- model：表单数据对象 -->
      <!-- rules：表单验证 -->
      <!-- prop : 必填项 -->
      <!-- v-model: -->
      <el-form ref="ruleForm" label-width="20%" :model="ruleForm" :rules="rules" >
        <el-form-item label="学科名称" prop="subjectName" >
          <el-input v-model="ruleForm.subjectName" style="width:100%">

          </el-input>
        </el-form-item>
        <!-- 切换按钮 -->
        <el-form-item label="是否显示">
          <el-switch v-model="ruleForm.isFrontDisplay" active-color="#13ce66" inactive-color="#ff4949" :active-value=1  :inactive-value=0>

          </el-switch>
        </el-form-item>

        <el-form-item >
          <el-button @click="closedialog">取消</el-button>
          <el-button type="primary" @click="affirm">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
import { add, update, detail } from '@/api/hmmm/subjects'

export default {
  props: {
    // 控制当前组件显示||隐藏
    dialogFormVisible: {
      // 类型：布尔型
      type: Boolean,
      // 默认值：false
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      ruleForm: {
        subjectName: '',
        // 选择按钮默认
        isFrontDisplay: 1
      },
      // 这个控制显示隐藏，得再父组件中定义，不能子组件本身定义，因为组件要复用
      // dialogFormVisible: false,
      rules: {
        subjectName: [
          { required: true, message: '输入不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  methods: {
    // 控制，弹窗的显示隐藏
    closedialog () {
      // this.$emit('update:需要修改的值', false)
      this.$emit('update:dialogFormVisible', false)
      this.$emit('update:fatherTitle', '')
      this.$refs.ruleForm.resetFields()
      this.ruleForm = {
        subjectName: '',
        isFrontDisplay: 1
      }
    },
    async shouFormDate (id) {
      const { data } = await detail({ id })
      // console.log(res)
      // console.log(data)
      this.ruleForm = data
    },

    // 表单验证+新增
    affirm () {
      // 兜底校验
      this.$refs.ruleForm.validate(async flag => {
        // 如果没有通过直接return
        if (!flag) return

        if (this.ruleForm.id) {
          // 传入整个ruleForm
          // console.log(this.ruleForm.id)
          await update(this.ruleForm)
          this.$message.success('修改成功')
        } else {
          // 如果通过则调用接口，直接传入数据到后台接口完成添加
          // console.log(this.ruleForm)
          await add(this.ruleForm)
          // 添加成功后，弹窗显示
          this.$message.success('添加成功')
        // 重新渲染数 ,使用this.$emit 去父组件里面请求数据
        }
        this.$emit('getList')
        // 关闭弹窗  调用上面封装的组件
        this.closedialog()
        // 重置表单
      })
    }

  }
}
</script>

<style scoped lang='less'>
</style>
